<template>
  <view class="order container">
    <view class="order-header">
      <u-tabs
        :list="tabList"
        lineWidth="30"
        :current="currentIndx"
        lineColor="#f56c6c"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        @change="handleTabsChangeItem"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </u-tabs>
    </view>

    <view class="order-body">
      <view
        class="order-body-item"
        v-for="(item, index) of currentShowOrderList"
        :key="index"
        @click.stop="
          $jump('/subPages/user/order/await-service', {
            query: { orderId: item.orderInfo._id },
          })
        "
      >
        <view class="item-header">
          <uni-section
            :title="item.projectInfo.title"
            titleFontSize="38rpx"
            titleColor="#333"
            type="line"
          >
            <template v-slot:right>
              <view
                class="item-header-right"
                style="color: #ff0000; font-size: 26rpx"
              >
                {{
                  item.orderInfo.status_code < tabList.length
                    ? tabList[item.orderInfo.status_code].name
                    : item.orderInfo.status_code === 6
                    ? "已完成"
                    : "已取消"
                }}
              </view>
            </template>
          </uni-section>
        </view>

        <view class="item-body">
          <view class="project-message flex flex-item-center">
            <image
              v-if="item.projectInfo.project_log"
              :src="$photo(item.projectInfo.project_log)"
              mode=""
            />
            <view class="project-message-right">
              <view class="name" style="color: #333; font-size: 30rpx"> </view>
              <view class="point">
                <text>{{
                  item.projectInfo.project_time + "分钟&nbsp;|&nbsp;"
                }}</text>
                <text
                  v-for="(data, index) of item.projectInfo.effect"
                  :key="index"
                >
                  {{
                    data +
                    (index === item.projectInfo.effect.length - 1
                      ? ""
                      : "&nbsp;|&nbsp;")
                  }}
                </text>
              </view>
              <view class="time">{{
                $u.timeFormat(
                  item.projectInfo.creatorTime,
                  "yyyy-mm-dd hh:MM:ss"
                )
              }}</view>
            </view>
          </view>
          <view class="flex flex-item-center flex-justify-between">
            <view>服务费</view>
            <view style="font-weight: bold">
              ￥{{ item.projectInfo.price }}
            </view>
          </view>
          <view class="flex flex-item-center flex-justify-between">
            <view>打车费</view>
            <view style="font-weight: bold">
              ￥{{ item.orderInfo.distance * 10 }}
            </view>
          </view>
          <view>
            合计:
            <text style="font-weight: bold; color: #f60000; padding: 0 30rpx">
              ￥{{
                Number(item.projectInfo.price) + item.orderInfo.distance * 10
              }}
            </text>
          </view>
          <view class="item-body-footer flex flex-item-center">
            <template v-if="item.orderInfo.status_code === 1">
              <view class="btn" @click.stop="cancelOrder(item.orderInfo, index)"
                >取消订单</view
              >
              <view
                class="btn pay-btn"
                @click.stop="
                  $jump('/subPages/user/order/pay', {
                    query: {
                      orderId: item.orderInfo._id,
                    },
                  })
                "
                >去付款</view
              >
            </template>
            <template v-else-if="item.orderInfo.status_code === 2">
              <view class="btn" @click.stop="cancelOrder(item.orderInfo, index)"
                >取消订单</view
              >
            </template>
            <template v-else-if="item.orderInfo.status_code === 3">
              <view class="btn" @click.stop="cancelOrder(item.orderInfo, index)"
                >取消订单</view
              >
            </template>
            <template v-else-if="item.orderInfo.status_code === 4">
              <view
                class="btn"
                @click.stop="
                  $jump('/subPages/home/technician-list/technician-list', {
                    query: {
                      repurchase: 1,
                      technicianId: item.technicianInfo._id,
                      project_id: item.projectInfo._id,
                    },
                  })
                "
              >
                再次预约
              </view>
              <view
                class="btn color-btn"
                @click.stop="
                  $jump('/subPages/user/order/evaluate', {
                    query: {
                      orderId: item.orderInfo._id,
                      projectId: item.projectInfo._id,
                    },
                  })
                "
              >
                去评价
              </view>
            </template>

            <template v-else> </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getModelList, updateModel, getModelInfo } from "@/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      currentIndx: 0,
      currentType: -1,
      status: false,
      allOrderList: [],
      currentShowOrderList: [],
    };
  },

  methods: {
    async handleTabsChangeItem(data) {
      this.currentIndx = data.index;
      await this.getOrderListData();
      this.currentShowOrderList =
        data.code >= 0
          ? this.allOrderList.filter(
              (item) => item.orderInfo.status_code === data.code
            )
          : this.allOrderList;
    },
    // 获取订单列表
    async getOrderListData(
      filter = {
        currentPage: 1,
        pageSize: -1,
      }
    ) {
      let orderList = [];
      const { data } = await getModelList("66002f4f5efd5153ff566ec3", filter);
      let originList = data?.list;
      for (const item of originList) {
        // 同时请求技师信息和订单信息和地址信息
        let [technicianInfo, orderInfo, addressInfo, projectInfo] =
          await Promise.all([
            this.getTechnicianInfo(item.baseInfo_id),
            this.getOrderData(item._id),
            this.getNormalAddress(item.address_id),
            this.getProjectInfo(item.current_project_Info),
          ]);
        orderList.push({
          technicianInfo,
          orderInfo,
          addressInfo,
          projectInfo,
        });
      }
      this.allOrderList = orderList;
    },
    // 获取技师信息
    async getTechnicianInfo(id) {
      const { data } = await getModelInfo("65c08a445efd5153ff55d908", id);
      return data;
    },
    // 获取项目信息
    async getProjectInfo(id) {
      const { data } = await getModelInfo("65b1d17c0921260197c48a76", id);
      return data;
    },
    // 获取默认地址信息
    async getNormalAddress(id) {
      const { data } = await getModelInfo("65c1d9085efd5153ff55e6f4", id);
      return data;
    },
    // 获取当前订单数据
    async getOrderData(id) {
      const { data } = await getModelInfo("66002f4f5efd5153ff566ec3", id);
      return data;
    },
    // 取消订单
    async handleConfirmCancel({ data, index }) {
      // 发送请求取消订单
      await updateModel(
        "66002f4f5efd5153ff566ec3",
        { ...data, status_code: 9 },
        data._id
      );
      this.currentShowOrderList.splice(index, 1);
      // 重新获取订单列表
      await this.getOrderListData();
    },
    // 取消订单
    cancelOrder(data, index) {
      uni.showModal({
        title: "提示",
        content: "确定取消订单吗？",
        success: (res) => {
          if (res.confirm) {
            this.handleConfirmCancel.call(this, { data, index });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
  computed: {
    ...mapState("dictionary", ["userMenuList"]),
    tabList() {
      let arr = this.userMenuList;
      return [{ name: "全部", code: -1 }, ...arr];
    },
  },
  async onShow() {
    await this.getOrderListData();
    if (this.currentType > 0) {
      this.currentIndx = this.tabList.findIndex(
        (item) => item.code === this.currentType
      );
      this.currentShowOrderList = this.allOrderList.filter(
        (item) => item.orderInfo.status_code === this.currentType
      );
    } else {
      this.currentShowOrderList = this.allOrderList;
    }
  },
  onLoad(options) {
    const { code } = options;
    if (code) {
      this.currentType =
        this.userMenuList.findIndex(
          (item) => Number(item.code) == Number(code)
        ) < 0
          ? 0
          : Number(code);
    } else {
      this.currentType = 0;
      console.log("无code");
    }
  },
};
</script>

<style lang="scss" scoped>
%circle {
  padding: 0 30rpx;
  height: 52rpx;
  line-height: 52rpx;
  border-radius: 35rpx;
  border: 1px solid #c5c5c5;
  text-align: center;
  margin-left: 30rpx;
  font-size: 26rpx;
  color: #666666;

  &:active {
    transform: scale(0.98);
  }
}
.order {
  position: relative;
  background-color: #fff;

  &-header {
    position: sticky;
    background-color: #fff;
    padding: 20rpx 0;
    box-sizing: border-box;
    top: 0;
    z-index: 9999;
    margin: 20rpx 0;
  }

  &-body {
    padding: 0 20rpx;
    box-sizing: border-box;

    &-item {
      box-shadow: 0px 6px 18px 1px rgba(209, 209, 209, 0.4);
      border-radius: 15px;
      margin-bottom: 20rpx;

      .item-body {
        padding: 0 30rpx;
        padding-bottom: 1px;

        > view {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 20rpx;
        }

        .project-message {
          > image {
            width: 170rpx;
            height: 126rpx;
            flex-shrink: 0;
            margin-right: 24rpx;
          }

          &-right {
            > view {
              font-size: 26rpx;
              color: #999;
              margin-bottom: 10rpx;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }

        &-footer {
          justify-content: flex-end;
          .btn {
            @extend %circle;
          }

          .pay-btn {
            background-color: #c94117;
            color: #fff;
            border: none;
          }

          .color-btn {
            color: #c94117;
            border: 1px solid #c94117;
          }
        }
      }
    }
  }
}

::v-deep .uni-section .uni-section-header__decoration {
  transform: scale(1.5);
  background-color: #c94117;
  margin-right: 16rpx;
}
</style>
